<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script src="../jquery-3.2.0.js" type="text/javascript">

		</script>
		<script type="text/javascript">
			$(function() {
				$("div.bbs span").click(function() {
					$("div.bbs .post").show();
				});
			});

			$(function() {
				$("div.bbs .btn").click(function() {
					$("div.bbs .post").hide();
				});
			});

			$(function() {
				$(".btn").click(function() {
					//创建<li></li>
					var $div=$("<div></div>");
					var $li = $("<li></li>");
					$("ul").append($li);
					//创建图片
					// var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
					//随机数
// 					alert(tou.length);
// 					var r = parseInt(Math.random() * tou.length);
// 
					// var $img = $("<img src=images/"+ tou[r] + "/>");
					var num=Math.floor(Math.random()*4+1);
					var img="images/tou0"+num+".jpg";
					var $img1 = $("<img src='"+img+"'/>");
					$li.append($div);
					$div.append($img1);
					//创建h1标题
					var $h1 = $("<h1>" + $(".title").val() + "</h1>");
					$li.append($h1);

					var date = new Date();
					var year = date.getFullYear();
					var month = date.getMonth();
					var day = date.getDate();
					var hh = date.getHours();
					var mm = date.getMinutes();
					var ss = date.getSeconds();
					var time = year + "-" + month + "-" + day + "  " + hh + ":" + mm + ":" + ss;

					//版块
					var $p = $("<p>" + "版块：" + $("select").val() + "   " + "<span>发表时间:" + time + "</span></p>");
					$li.append($p);
					$("ul#postList").prepend($li);
				});
			});
		</script>
	</head>
	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post" id="post1">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布">
			</div>
			 
		</div>
	</body>
</html>
